//广场布局
<template>
  <div>
    <header>
      <el-row id="head">
        <div id="loginname">
          <a href="/">
            <img src="~/assets/square/log.png">
          </a>
        </div>
        <div id="header">
          <div v-if="user.username!==undefined" class="header-social d-flex align-items-center">
            <a href="/manager">
              <i class="fa" style="color:white">{{user.username}}</i>
            </a>
            <a href="/manager">
              <i class="fa">
                <img :src="user.userImage" width="30px" height="30px" :alt="user.username">
              </i>
            </a>
            
            <a @click="logout()">
              <i class="fa">退出登录</i>
            </a>
          </div>
          <div v-if="user.username===undefined" class="header-social d-flex align-items-center">
            <a  href="/login">登录</a>
          </div>
        </div>
      </el-row>
    </header>

    <nuxt/>
  </div>
</template>

<style>
#head {
  background: #373737;
  height: 90px;
}
#header {
  float: right;
  text-align: right;
  align-content: center;
  color: white;
  height: 90px;
  background: #373737;
}
#loginname {
  float: left;
  text-align: right;
}
</style>

<script>
import { getUser, removeUser } from "@/utils/auth";
import "~/assets/login/css/bootstrap.min.css";
import "~/assets/home/css/linearicons.css";
import "~/assets/home/css/owl.carousel.css";
import "~/assets/home/css/font-awesome.min.css";
import "~/assets/home/css/animate.css";
import "~/assets/home/css/bootstrap.css";
import "~/assets/home/css/main.css";
export default {
  data() {
    return {
      user: {}
    };
  },
  created() {
    this.user = getUser();
  },
  methods: {
    logout() {
      removeUser();
      location.href = "/";
    }
  }
};
</script>
